<template>
	<view class="_showToast" v-show="show">
		<view class="content-box">
			<text>{{content}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "show-toast",
		data() {
			return {

			};
		},
		computed: {
			show() {
				return this.$toastStore.state.show;
			},
			content() {
				return this.$toastStore.state.content;
			},
			delay(){
				return this.$toastStore.state.delay;
			}
		},
		mounted() {
			setTimeout(() => {
				this.$toastStore.commit('hideToast')
			}, this.delay)
		},
		methods: {
			closeToast() {
				this.$toastStore.commit('hideToast')
			},
			clickBtn(res) {
				this.$toastStore.commit('hideToast')
				this.$toastStore.commit('success', res)
			}
		},
		beforeDestroy() {
			this.$toastStore.commit('hideToast')
		},
	}
</script>

<style lang="scss" scoped>
	._showToast {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000000;

		.content-box {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 444rpx;
			z-index: 99999;
			max-width: 432px;
			padding: 20rpx;
			box-sizing: border-box;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			background: #000000;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(0, 0, 0, 0.3);
			border-radius: 8rpx;
			opacity: 0.9;
		}
	}
</style>